<template>
  <div class="tab-bar">
    <ul>
      <router-link
      tag="li"
      :to="item.path"
      active-class="active"
      v-for="item in tabBarList" 
      :key="item.id"
      >
        <van-icon :name="item.icon_name" />
        <span>{{ item.text }}</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabBarList: [
        {
          id: 1,
          icon_name: "gem-o",
          text: "首页",
          path: "/home",
        },
        {
          id: 2,
          icon_name: "browsing-history-o",
          text: "分类",
          path: "/category",
        },
        {
          id: 3,
          icon_name: "chat-o",
          text: "活动",
          path: "/active",
        },
        {
          id: 4,
          icon_name: "manager-o",
          text: "购物车",
          path: "/cart",
        },
        {
          id: 5,
          icon_name: "hot-o",
          text: "我的",
          path: "/mine",
        },
      ],
    };
  },
};
</script>


<style lang="scss" scoped>
@import '@/assets/style/color.scss';
.tab-bar {
  height: 48px;
  border-top: 1px solid #d8d8d8;
  ul {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      span{
        font-size: 12px;
      }
      &.active {
        i {
          color: $theme_color;
        }
        span {
          
          color: $theme_color;
        }
      }
    }
  }
}
</style>